<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Events</title>
    <script>
        
    </script>
</head>
<body>
    <h1>表单事件</h1>
    <form action="" method="post" id="form">
        <p>
            <label for="">姓名:</label>
            <input type="text" name="username">
        </p>
        <p>
            <label for="">密码:</label>
            <input type="password" name="password">
        </p>
        <p>
            <label for="">邮箱:</label>
            <input type="email" name="email">
        </p>
        <p>
            <label for="">性别:</label>
            <input type="radio" name="sex" value="0" checked>男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label for="">爱好:</label>
            <input type="checkbox" name="like" value="sing">唱
            <input type="checkbox" name="like" value="jump">跳
            <input type="checkbox" name="like" value="rap">rap
        </p>
        <p>
            <label for="">城市:</label>
            <select name="city" id="">
                <option value="bj">请选择</option>
                <option value="km">昆明</option>
                <option value="cq">重庆</option>
                <option value="gz">广州</option>
            </select>
        </p>
        <p>
            <label for="">个人简介:</label>
            <textarea name="jianjie" id=""></textarea>
        </p>
        <p>
            <label for="">头像：</label>
            <!-- <input type="file" name="avatar" onchange="previewImage(this)">
            <img src="" alt="" style="width: 200px; height: 200px;"> -->
            <input type="file" name="avatar" id="avatar">
            <img src="" alt="" id="preview" style="width: 200px; height: 200px;">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>
<script>
    //  function previewImage(input) {
    //         // 获取 img 元素
    //         const img = document.querySelector('img');
    //         if (input.files && input.files[0]) {
    //             // 创建 FileReader 对象
    //             const reader = new FileReader();
    //             // 当文件读取完成时触发此事件
    //             reader.onload = function(e) {
    //                 // 将读取到的图片数据赋值给 img 元素的 src 属性
    //                 img.src = e.target.result;
    //             };
    //             // 以 Data URL 格式读取文件
    //             reader.readAsDataURL(input.files[0]);
    //         }
    //     }

    let avatar = document.getElementById('avatar');
    let preview = document.getElementById('preview');
    let form = document.getElementById('form');

    console.log(avatar);

    avatar.onchange = function (e) {
        let file = e.target.files[0];
        //url接口的createObjectURL方法可以根据本地文件创建一个对象的url
        let url = URL.createObjectURL(file);
        preview.setAttribute('src',url)
        console.log(url);
    }

    form.onsubmit = function (e) {
        //阻止默认事件
        e.preventDefault();
        //获取表单元素
        console.log (form['username'].value)
        //获取表单数据
        let formData = new FormData(form);
        //formData.entries()方法返回一个iterator对象，此对象可以波案例访问form DATa中的所有键值对，object.fromentries()方法可以将iterator对象转换为对象
        let data = Object.fromEntries(formData.entries());
        console.log(data);

    }
</script>